<template>
    <div class="dashboard-editor-container">

        <el-row :gutter="32" style="margin-bottom:32px;">
            <el-col  :lg="16">
                <div class="el-card">
                    <div class="el-card__body" style="height: 550px;">
                        <bd-map   :mapArrayProps="mapData" />
                    </div>
                </div>
            </el-col>
            <el-col :lg="8">
                <el-row :gutter="32" style="margin-bottom:32px;">
                    <div class="el-col ">
                        <div class="el-card">
                            <div class="el-card__header">
                                <svg-icon icon-class="documentation" class-name="card-panel-icon"/>
                                <span> 洗车订单数量(单)</span>
                            </div>
                            <div class="el-card__body">
                                内容
                            </div>
                        </div>
                    </div>
                    <div class="el-col ">
                        <div class="el-card">
                            <div class="el-card__header">
                                <svg-icon icon-class="documentation" class-name="card-panel-icon"/>
                                <span> 洗车订单数量(单)</span>
                            </div>
                            <div class="el-card__body">
                                <order-chart :chart-data="orderChartData"  />
                            </div>
                        </div>
                    </div>
                </el-row>
            </el-col>
        </el-row>
        <el-row :gutter="32" style="margin-bottom:32px;">
            <el-col  :lg="10">
                <div class="el-card">
                    <div class="el-card__header">
                        <svg-icon icon-class="documentation" class-name="card-panel-icon"/>
                        <span> 工单派单情况(单)</span>
                    </div>
                    <div class="el-card__body">
                        工单派单情况
                    </div>
                </div>
            </el-col>
            <el-col :lg="6">
                <div class="el-card">
                    <div class="el-card__header">
                        <svg-icon icon-class="documentation" class-name="card-panel-icon"/>
                        <span> 洗车派单完成转化率(单)</span>
                    </div>
                    <div class="el-card__body">
                        洗车派单完成转化率
                    </div>
                </div>
            </el-col>
            <el-col :lg="8">
                <div class="el-card">
                    <div class="el-card__header">
                        <svg-icon icon-class="documentation" class-name="card-panel-icon"/>
                        <span> 实时洗车订单</span>
                    </div>
                    <div class="el-card__body">
                        实时洗车订单
                    </div>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import bdMap from './bdMap';
    import orderChart from './orderChart';
    import {statistics, versionLogs, getServerStatus} from "@/api/admin/indexs";

    const orderChartData = {
        newVisitis: {
            expectedData: [100, 120, 161, 134, 105, 160, 165],
            actualData: [120, 82, 91, 154, 162, 140, 145]
        },
        messages: {
            expectedData: [200, 192, 120, 144, 160, 130, 140],
            actualData: [180, 160, 151, 106, 145, 150, 130]
        },
        purchases: {
            expectedData: [80, 100, 121, 104, 105, 90, 100],
            actualData: [120, 90, 100, 138, 142, 130, 130]
        },
        four: {
            expectedData: [130, 140, 141, 142, 145, 150, 160],
            actualData: [120, 82, 91, 154, 162, 140, 130]
        }
    };

    export default {
        name: 'DashboardAdmin',
        components: {
            bdMap,
            orderChart,
        },
        // 监听
        watch: {
            //当  属性的值发生改变时会执行下面的代码
            server_data: function (newValue, oldValue) {
                this.server_data = newValue;
            },
        },
        data() {
            return {
                mapData:[{
                    "title": "中石化济南166站洗车机",
                    "point": "117.101969,36.656035",
                    "address": "中石化济南166站",
                    "status": 3,
                    "code": "COLD"
                },
                    {
                        "title": "中石化济南14站洗车机",
                        "point": "117.020996,36.655577",
                        "address": "中石化济南14站",
                        "status": 1,
                        "code": "COLD"
                    }, {
                        "title": "中石化济南2站洗车机",
                        "point": "117.018827,36.690399",
                        "address": "中石化济南2站",
                        "status": 3,
                        "code": "COLD"
                    }, {
                        "title": "中石化济南164站洗车机",
                        "point": "117.162327,36.661038",
                        "address": "中石化济南164站",
                        "status": 3,
                        "code": "COLD"
                    },
                    {
                        "title": "中石化济南89站洗车机",
                        "point": "117.157028,36.7835",
                        "address": "中石化济南89站",
                        "status": 1,
                        "code": "COLD"
                    }, {
                        "title": "中石化济南128站洗车机",
                        "point": "117.169278,36.710888",
                        "address": "中石化济南128站",
                        "status": 1,
                        "code": "COLD"
                    }
                ],
                orderChartData: orderChartData.newVisitis,
                skill:[], // 技能组
                data:{},
                version_logs: [], // 版本记录
                server_data: {}, // 服务器状态信息
                center: {lng: 109.45744048529967, lat: 36.49771311230842},
                zoom: 13
            }
        },
        created() {
            // 首页 - 统计信息
            // this.statistics();

            // 版本记录
            // this.versionLogs();

            // 服务器状态信息
            setTimeout(() => {
                this.getServerStatus();
                this.timedRequestServerStatus();
            }, 1000);
        },
        methods: {
            // 首页 - 统计信息
            async statistics() {
                this.listLoading = true;
                const {data} = await statistics();
                this.data = data;

                // 技能
                this.skill = data.skill;

                setTimeout(() => {
                    this.listLoading = false;
                }, 300);
            },
            // 版本记录
            async versionLogs(){
                const {data} = await versionLogs();
                this.version_logs = data;
            },
            // 服务器状态信息
            async getServerStatus(){
                const {data} = await getServerStatus();
                this.server_data = data;
            },
            // 定时：服务器状态信息
            timedRequestServerStatus(){
                // 定时多少秒触发一次：默认60秒【服务器状态信息】
                window.setInterval(() => {
                    setTimeout(this.getServerStatus, 0);
                }, 1000 * 60);
            },
            handleSetMapData(type) {
                this.mapData = orderChartData[type];
            },
            handleSetOrderChartData(type) {
                this.orderChartData = orderChartData[type];
            },
        }
    }
</script>

<style lang="scss" scoped>
    .dashboard-editor-container {
        padding: 5px;
        background-color: rgb(240, 242, 245);
        position: relative;

        .el-row{
            margin-bottom:30px;
        }
        .el-card .el-card__body {
            padding: 10px;
        }
        .el-card .el-card__header {
            background: linear-gradient(90deg, #1E6ECEFF, #388CF0FF);
            border-radius: 3px 3px 0px 0px;
            color: #FFFFFFFF;
        }
        .github-corner {
            position: absolute;
            top: 0px;
            border: 0;
            right: 0;
        }

        .chart-wrapper {
            background: #fff;
            padding: 16px 16px 0;
            margin-bottom: 32px;
        }

        .chart-container{
            position: relative;
            width: 100%;
            height: calc(100vh - 100px);
        }
    }

    @media (max-width: 1024px) {
        .chart-wrapper {
            padding: 8px;
        }
    }
</style>
